{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<center>
  <a href="/app/">Today |</a>
  <a href="/app/week">Week |</a>
  <a href="/app/month">Month |</a>
  <a href="/app/alltime">All Time</a>
</center>
{% if incidents %}
<div class="container">
  <div class="accordion span5 offset3" id="accordion2">
    {% for i in incidents %}
    <br>
    <div class="accordion-group">
      <div class="accordion-heading">
				<form action="/app/addVote/{{i.id}}" method="GET">

      		<input type="submit" name="down" value={{i.downvotes}} class="btn btn-danger btn-small pull-right">
		<i class="icon-arrow-down pull-right"></i>
      		<input type="submit" name="up" value={{i.upvotes}} class="btn btn-success btn-small pull-right">
      		<i class="icon-arrow-up pull-right"></i>
      	</form>


        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#{{i.id}}"><img src="/static/images/{{i.category}}.png" width=20 height=20 />   {{i.title}}</a>
      </div>
	      <div id="{{i.id}}" class="accordion-body collapse">
				<div class="accordion-inner">
								<div class="well">
									<div class="row">
										<div class="span3">
											<dl>
												<dt>Submitted On</dt>
												<dd>{{i.submission_time}}</dd>
											</dl>
										</div>
									</div>
									{{i.description}}
								</div>
								      		<a href="https://twitter.com/share" class="twitter-share-button" data-via="pjmoore1992" data-size="large" data-hashtags="ihero" data-text="{{i.title}}" data-url="http://130.209.250.202:8000/app/#{{i.id}}" data-count >Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
				  <dl>
						{% if i.location %}
					  <dt>Location: {{i.location}}</dt>
					  <dd><img src="http://maps.googleapis.com/maps/api/staticmap?center={{i.location}}&zoom=16&size=400x400&maptype=hybrid&sensor=true"/></dd>
					  <dt>Street View</dt>
					  <dd><img src="http://maps.googleapis.com/maps/api/streetview?size=400x400&location={{i.location}}&sensor=false"></dd>
						{% endif %}
					</dl>
				</div>
	      </div>
    </div>

    {% endfor %}



    {% else %}
    <p>No Incidents Available</p>

    {% endif %}
  </div>
 </div>
  <!-- END OF VIEW -->

  {% endblock %}
